<template>
  <!-- 变压器 配置 -->
  <a-form
    :model="form"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
    :rules="rules"
    layout="vertical"
    ref="formRef"
    :disabled="!configData.isEdit"
  >
    <a-form-item label="变压器名称" name="name">
      <a-input v-model:value="form.name" class="formInput" />
    </a-form-item>
    <a-form-item label="变压器种类" name="tfType">
      <a-select class="formSelect" v-model:value="form.tfType">
        <a-select-option :value="1">10KV</a-select-option>
        <a-select-option :value="2">35KV</a-select-option>
        <a-select-option :value="3">110KV</a-select-option>
        <a-select-option :value="4">400V</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="资产设备编号" name="orderNum">
      <a-input v-model:value="form.orderNum" class="formInput" />
    </a-form-item>
    <a-form-item label="变压器资产编码" name="assetCode">
      <a-input v-model:value="form.assetCode" class="formInput" />
    </a-form-item>
    <a-form-item
      label="是否存在关口表"
      name="isGatewayMeter"
      @click="changeIsGatewayMeter"
    >
      <a-select class="formSelect" v-model:value="form.isGatewayMeter">
        <a-select-option :value="1">是</a-select-option>
        <a-select-option :value="0">否</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
      v-if="form.isGatewayMeter"
      label="关口表名称"
      name="gatewayName"
    >
      <a-input v-model:value="form.gatewayName" class="formInput" />
    </a-form-item>
    <a-form-item
      v-if="form.isGatewayMeter"
      label="资产表编号"
      name="meterOrderNum"
    >
      <a-input
        v-model:value="form.meterOrderNum"
        class="formInput"
      />
    </a-form-item>
    <a-form-item
      v-if="form.isGatewayMeter"
      label="关口表资产编码"
      name="gatewayAssetCode"
    >
      <a-input
        v-model:value="form.gatewayAssetCode"
        class="formInput"
      />
    </a-form-item>
    <a-form-item label="变压器容量(kWh)">
      <a-input-number
        v-model:value="form.capacity"
        class="formInput"
        :controls="false"
      />
    </a-form-item>
    <a-form-item label="变压器最大利用率（%）">
      <a-input-number
        v-model:value="form.profileRate"
        class="formInput"
        :controls="false"
      />
    </a-form-item>
    <a-form-item label="变压器需量">
      <a-input-number
        v-model:value="form.demand"
        class="formInput"
        :controls="false"
      />
    </a-form-item>
  </a-form>
  <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
    <a-button v-if="!configData?.isEdit" type="primary" @click="handleEdit"
      >编辑</a-button
    >
    <a-button
      v-else
      type="primary"
      @click="onSubmit"
      :loading="stionConfigState.configDataSaveLoading"
      >保存</a-button
    >
  </a-form-item>
</template>
<script setup>

import { EQUIP_TYPE } from "@/constants/stationConfig";
import { useStionConfigStore } from "@/stores/stationConfig";
const { stionConfigState, changeConfigData } = useStionConfigStore();
const configData = computed(() => stionConfigState.configData);
import { cloneDeep } from "lodash-es";
const draggableElment = computed(() => stionConfigState.draggableElment);
const $api = inject("$api");
const emits = defineEmits(["getConfig"]);
watch(
  () => stionConfigState.configData,
  (val) => {
    form.value = cloneDeep(stionConfigState.configData);
  },
  { deep: true }
);
const form = ref({
  name: null,
  assetCode: null,
  orderNum: null,
  meterOrderNum: null,
  isGatewayMeter: null,
  gatewayName: null,
  gatewayAssetCode: null,
  type: EQUIP_TYPE.BIAN_YA_QI,
  xuliang: null,
  demand: null,
  tfType: null,
});
const rules = {
  name: [{ required: true, message: "请输入", trigger: "change" }],
  tfType: [{ required: true, message: "请选择", trigger: "change" }],
  assetCode: [{ required: true, message: "请输入", trigger: "change" }],
  orderNum: [{ required: true, message: "请输入", trigger: "change" }],
  meterOrderNum: [{ required: true, message: "请输入", trigger: "change" }],
  isGatewayMeter: [{ required: true, message: "请选择", trigger: "change" }],
  gatewayName: [{ required: true, message: "请输入", trigger: "change" }],
  gatewayAssetCode: [{ required: true, message: "请输入", trigger: "change" }],
};
const formRef = ref(null);
const onSubmit = () => {
  formRef.value
    .validate()
    .then(() => {
      form.value.type = EQUIP_TYPE.BIAN_YA_QI;
      form.value.gatewayMeterModelId = draggableElment.value.filter(
        (item) => item.modelType === EQUIP_TYPE.GUAN_KOU_BIAO
      )[0].id;
      form.value.gatewayMeterModelType = draggableElment.value.filter(
        (item) => item.modelType === EQUIP_TYPE.GUAN_KOU_BIAO
      )[0].modelType;
      emits("getConfig", toRaw(form));
    })
    .catch((error) => {
      console.log("error", error);
    });
};
const changeIsGatewayMeter = async (val) => {
  if (val) {
    const res = await $api.assertCode({
      type: EQUIP_TYPE.GUAN_KOU_BIAO,
    });
    form.value.gatewayAssetCode = res.data;
    // form.value.gatewayMeterModelId = draggableElment.value.filter((item) => item.modelType === EQUIP_TYPE.GUAN_KOU_BIAO)[0].id
    // form.value.gatewayMeterModelType = draggableElment.value.filter((item) => item.modelType === EQUIP_TYPE.GUAN_KOU_BIAO)[0].modelType
  }
};
const handleEdit = () => {
  changeConfigData({
    ...stionConfigState.configData,
    isEdit: true,
  });
};
const labelCol = { style: { width: "150px" } };
const wrapperCol = { span: 14 };
onMounted(() => {
  // form.value = stionConfigState.configData;
});
</script>
<style lang="less" scoped>
.formInput {
  width: 175px;
}
.formSelect {
  width: 175px;
  text-align: left;
}
</style>